<template>
  <PageView :pageData="Page" @operateChange="operateChange" ref="pgRef">
    <template #enabled="data">
      <a-switch
        v-model:checked="data.record.enabled"
        @change="
          (val) => {
            changeEnabled(val, data.record);
          }
        "
      />
    </template>
  </PageView>
</template>
<script setup>
import {
  getUserList,
  deleteUser,
  editUser,
  addUser,
  resetUserPassword,
  updateUserEnabled,
} from "@/apis/user";
import { getPermissionOrganization } from "@/apis/permission";
import { getRoleList } from "@/apis/roles";

const pgRef = ref(null);

/**
 * 表格操作按钮回调函数
 */
const operateChange = (info, row) => {
  if (info.key === "restPassword") {
    console.log(Modal, "modal");
    Modal.confirm({
      title: "重置密码",
      content: "确定将重置密码为123456？",
      onOk() {
        resetPwd(row.id);
      },
      onCancel() {
        console.log("Cancel");
      },
      class: "test",
    });
  }
};

/**
 * 修改状态
 */
const changeEnabled = async (val, row) => {
  const { code } = await updateUserEnabled({
    id: row.id,
    enabled: val,
  });
  if (code === rescf.codeVal) {
    message.success(`用户已${val ? "启用" : "禁用"}！`);
    pgRef.value?.fetchData();
  } else {
    message.success(`用户${val ? "启用" : "禁用"}失败！`);
  }
};

/**
 * 重置密弹窗ref绑定。
 */
const restPwdModalRef = ref(null);

const resetPwd = async (id) => {
  const { code } = await resetUserPassword({
    id,
  });
  if (code === rescf.codeVal) {
    message.success("重置密码成功！");
  } else {
    message.success("重置密码失败！");
  }
};

/**
 * 显示重置密码弹窗。
 */
const shwoRestPwdModal = () => {
  restPwdModalRef.value?.showModal();
};

const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: addUser,
  },
  form: {
    data: [
      {
        type: "Select",
        field: "searchKey",
        label: "搜 索",
        value: null,
        placeholder: "选择搜索类型",
        allowClear: true,
        options: [
          {
            label: "账号",
            value: "username",
          },
          {
            label: "手机号",
            value: "mobile",
          },
          {
            label: "姓名",
            value: "nickname",
          },
        ],
      },
      {
        type: "Input",
        field: "searchValue",
        allowClear: true,
        label: "",
        value: "",
        placeholder: "输入手机号/用户名/姓名搜索",
      },
    ],
  },
  table: {
    columns: [
      {
        title: "姓名",
        dataIndex: "nickname",
        key: "nickname",
      },
      {
        title: "账号",
        dataIndex: "username",
        key: "username",
      },
      {
        title: "手机号",
        dataIndex: "mobile",
        key: "mobile",
      },
      {
        title: "性别",
        dataIndex: "sex",
        key: "sex",
        render: (row) => {
          return row.sex === 1 ? "男" : "女";
        },
      },
      {
        title: "状态",
        dataIndex: "enabled",
        key: "enabled",
        slotName: "enabled",
      },
      // {
      //   title: "所属组织",
      //   dataIndex: "orgaName",
      //   key: "orgaName",
      // },
      {
        title: "操作",
        width: 200,
        key: "operate",
        btns: [
          {
            label: "编辑",
            class: "el-icon-edit table_edit-btn",
            key: "edit",
            method: editUser,
            beforeCreate: (row) => {
              row.roleId = row.roles.map((a) => a.id);
              return {
                code: rescf.codeVal,
                data: row,
              };
            },
          },
          {
            label: "重置密码",
            class: "table_edit-btn",
            key: "restPassword",
            // icon: "icon iconfont icon-bianji",
            // argKey: "userId",
            // argValue: "userId",
          },
          {
            label: "删除",
            class: "el-icon-edit table_edit-btn",
            key: "delete",
            content: "确定要删除吗？",
            method: deleteUser,
          },
        ],
      },
    ],
    data: getUserList,
  },
  modal: {
    title: "用户名",
    data: [
      {
        type: "Input",
        field: "nickname",
        label: "姓名：",
        value: "",
        placeholder: "姓名",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            msg: "请输入姓名",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "username",
        label: "账号名：",
        value: "",
        placeholder: "账号名",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            msg: "请输入账号名",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "mobile",
        label: "手机号码：",
        value: "",
        placeholder: "手机号码",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            validator: Filters.validatePhone,
            trigger: "blur",
          },
        ],
      },
      {
        type: "Select",
        field: "sex",
        label: "性别：",
        value: null,
        placeholder: "性别",
        labelWidth: "80px",
        options: [
          {
            label: "男",
            value: 1,
          },
          {
            label: "女",
            value: 0,
          },
        ],
      },
      // {
      //   type: "Cascader",
      //   field: "pca",
      //   label: "所属组织：",
      //   value: "",
      //   labelWidth: "80px",
      //   placeholder: "所属组织",
      //   arr2obj: ["orgaId", "orzId"],
      //   label2obj: ["orgaName", "orzName"],
      //   optionsProps: {
      //     label: "name",
      //     value: "id",
      //     children: "children",
      //   },
      //   options: getPermissionOrganization,
      //   rules: [
      //     {
      //       required: true,
      //       msg: "请选择所属组织",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      {
        type: "Select",
        field: "roleId",
        label: "赋予角色：",
        value: [],
        map: {
          key: "roles",
        },
        labelWidth: "80px",
        placeholder: "赋予角色",
        mode: "multiple",
        arr2str: true,
        optionsProps: {
          label: "name",
          value: "id",
        },
        options: () => {
          return getRoleList({
            page: 1,
            limit: 100000,
          });
        },
        rules: [
          {
            required: true,
            msg: "请赋予角色",
            trigger: "blur",
          },
        ],
      },
    ],
  },
});
</script>
